<template>
  <view style="background-color: #f5f5f5;height: 1128rpx;">
    <!-- 头部 -->
    <view class="header">
      <!-- 卡车图片 -->
      <view class="car-img">
        <image src="/static/tab_icons/img-bg@2x.png"></image>
      </view>
      <!-- 头像 -->
      <view class="avatar">
        <image src="/static/tab_icons/img-头像.png"></image>
      </view>
      <!-- 文本信息 -->
      <view class="text">
        <view
          style="width: 74rpx; height: 50rpx; font-weight: 600; font-size: 36rpx; color: #FFFFFF; text-align: center; margin:0 10rpx 20rpx 136rpx; transform: translateY(-40rpx);">
          李明</view>
        <view
          style="width: 272rpx; height: 40rpx; font-weight: 400; font-size: 28rpx; color: #FFFFFF; text-align: center; margin:0 0 20rpx 16rpx; transform: translateY(-40rpx);">
          司机编号 : 67409881</view>
        <view
          style="width: 340rpx; height: 40rpx; font-weight: 400; font-size: 28rpx; color: #FFFFFF; text-align: center; margin:0 10rpx 0 0; transform: translateY(-40rpx);">
          手机号码 : 177 9998 8765</view>

      </view>
    </view>
    <!-- 本月任务 -->
    <view class=" task">
      <view class="top"> - 本月任务 - </view>
      <view class="bottom">
        <view class="before">
          <text style="font-size: 36rpx; font-weight: 600;">18</text>
          <text style="font-size: 24rpx;">任务总量</text>
        </view>
        <view class="center">
          <text style="font-size: 36rpx; font-weight: 600;">16</text>
          <text style="font-size: 24rpx;">完成任务量</text>
        </view>
        <view class="end">
          <text style="font-size: 36rpx; font-weight: 600;">3987</text>
          <text style="font-size: 24rpx;">运输里程(km)</text>
        </view>
      </view>

    </view>
    <!--表单输入  -->
    <!--    <view class="null"></view>
 -->
    <view class="from">
      <u-cell-group :border="false">
        <u-cell size="large" :border="false" title="车辆信息" isLink></u-cell>
        <view class="line" style="height: 2rpx;background-color:  rgb(234, 234, 235) ">

        </view>
        <u-cell size="large" title="任务数据" isLink></u-cell>
        <u-cell size="large" :border="false" title="系统设置" isLink></u-cell>
      </u-cell-group>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    onLoad() {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  .header {
    width: 750rpx;
    height: 560rpx;
    background-color: #f05546;
    border-radius: 0 0 20% 20%;
    display: flex;
    flex-direction: column;
    align-items: center;

    .car-img {
      width: 266.66rpx;
      height: 120rpx;
      transform: translateY(-10rpx);
      display: none;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .avatar {
      width: 134.52rpx;
      height: 132.12rpx;
      margin: 30rpx 0 40rpx 0;
      transform: translateY(-20rpx);

      image {
        width: 100%;
        height: 100%;
      }

      .text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        // height: 100vh;
        // transform: translateY(80rpx);
      }
    }
  }

  .task {
    // 任务列表
    width: 690rpx;
    height: 268rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    margin-left: 30rpx;
    margin-top: -200rpx;


    .top {
      // 本月任务
      width: 168rpx;
      height: 40rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #818181;
      text-align: center;
      margin-left: 270rpx;
      transform: translateY(40rpx);
    }

    // 任务完成情况
    .bottom {
      width: 690rpx;
      height: 228rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 16rpx;

      .before,
      .center,
      .end {
        width: 230rpx;
        height: 228rpx;
        border-radius: 16rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }

      // .center {
      //   width: 230rpx;
      //   height: 228rpx;
      //   border-radius: 16rpx;
      //   display: flex;
      //   flex-direction: column;
      //   align-items: center;
      //   justify-content: center;
      // }

      // .end {
      //  width: 230rpx;
      //  height: 228rpx;
      //  border-radius: 16rpx;
      //   display: flex;
      //   flex-direction: column;
      //   align-items: center;
      //   justify-content: center;
      // }
    }
  }

  .null {
    height: 80rpx;
  }

  .from {
    width: 690rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    margin-left: 30rpx;
    margin-top: -80rpx;
    transform: translateY(120rpx);
    font-weight: 400;
    font-size: 32rpx;
    color: #2A2929;

  }
  /deep/.u-cell-group__wrapper {
      padding: 0 50rpx;
  
      /deep/.u-cell__body {
        padding: 0;
      }
  
    }
  
</style>